<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>本地文章编辑器</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
    }
    h1 {
      text-align: center;
      color: #333;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }
    input[type="text"], textarea, select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }
    textarea {
      min-height: 150px;
      resize: vertical;
    }
    #content {
      min-height: 300px;
    }
    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
    button:hover {
      background-color: #45a049;
    }
    #image-preview {
      max-width: 200px;
      max-height: 150px;
      margin-top: 10px;
      display: none;
    }
    .status-switch {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .success-message {
      color: green;
      margin-top: 10px;
      display: none;
    }
  </style>
</head>
<body>
  <h1>添加新文章</h1>
  
  <form id="article-form">
    <div class="form-group">
      <label for="title">文章标题</label>
      <input type="text" id="title" name="title" required>
    </div>
    
    <div class="form-group">
      <label for="category">文章分类</label>
      <select id="category" name="category" required>
        <option value="">请选择分类</option>
        <option value="技术">技术</option>
        <option value="生活">生活</option>
        <option value="学习">学习</option>
        <option value="其他">其他</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="image">封面图片</label>
      <input type="file" id="image" name="image" accept="image/*">
      <img id="image-preview" alt="封面预览">
    </div>
    
    <div class="form-group">
      <label for="summary">文章摘要</label>
      <textarea id="summary" name="summary" maxlength="200" required></textarea>
    </div>
    
    <div class="form-group">
      <label for="content">文章内容</label>
      <textarea id="content" name="content" required></textarea>
    </div>
    
    <div class="form-group status-switch">
      <label for="status">发布状态:</label>
      <input type="checkbox" id="status" name="status" checked>
      <span>立即发布</span>
    </div>
    
    <button type="submit">保存文章</button>
    <div id="success-message" class="success-message">文章保存成功！</div>
  </form>

  <script>
    // 初始化存储
    var items = localStorage.getItem('articles')
    if (!localStorage.getItem('articles')) {
      localStorage.setItem('articles', JSON.stringify([]));
    }

    // 图片预览
    document.getElementById('image').addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(event) {
          const preview = document.getElementById('image-preview');
          preview.src = event.target.result;
          preview.style.display = 'block';
        };
        reader.readAsDataURL(file);
      }
    });

    // 表单提交
    document.getElementById('article-form').addEventListener('submit', function(e) {
      e.preventDefault();
      
      // 获取表单数据
      const title = document.getElementById('title').value;
      const category = document.getElementById('category').value;
      const summary = document.getElementById('summary').value;
      const content = document.getElementById('content').value;
      const status = document.getElementById('status').checked ? 'published' : 'draft';
      const id = items.length + 1;
      // 获取图片数据
      const imageInput = document.getElementById('image');
      let cover = '';
      if (imageInput.files[0]) {
        const reader = new FileReader();
        reader.onload = function(event) {
          cover = event.target.result;
          saveArticle(id,title, category, summary, content, status, cover);
        };
        reader.readAsDataURL(imageInput.files[0]);
      } else {
        saveArticle(id,title, category, summary, content, status, cover);
      }
    });

    // 保存文章到本地存储
    function saveArticle(id,title, category, summary, content, status, cover) {
      const articles = JSON.parse(localStorage.getItem('articles'));
      const newArticle = {
        id,
        title,
        category,
        summary,
        content,
        status,
        cover,
        createTime: new Date()
      };
      
      articles.push(newArticle);
      localStorage.setItem('articles', JSON.stringify(articles));
      
      // 显示成功消息
      document.getElementById('success-message').style.display = 'block';
      setTimeout(() => {
        document.getElementById('success-message').style.display = 'none';
      }, 3000);
      
      // 重置表单
      document.getElementById('article-form').reset();
      document.getElementById('image-preview').style.display = 'none';
    }
  </script>
</body>
</html>